<template>
  <div style="width: 100%;height: 100%; background-color: #F3F4F8">
    <!--    头部-->
    <!--中部-->
    <div style="width: 100%;height: 100%;background-color: #F3F4F8;padding-top: 30px">
      <!--    订单详情-->
      <div style="width: 1200px;height:400px;margin: 0 auto;background-color: white">
        <!--          机票时间-->
        <div style="display: inline-block;width: 49%;height: 360px;border-right: 1px dashed #9ca3b2;padding-top: 55px">
          <div style="width: 100%;height: 60px;">
            <p style="display: flex;justify-content: space-around" >
              <span style="display:inline-block;width: 60px;height: 30px;background-color:#E5F9F2;color:#00C99A;text-align: center ">单程</span>
              <span>时间</span>
              <span><a href="" style="color:grey;">出票保证</a></span>
            </p>
            <p style="margin-left: 35px;margin-top: 20px">{{ plane.name }}{{ plane.flight }}</p>
          </div>
          <div class="flytime" style="display: flex;justify-content: space-around;margin-top: 50px;">
            <div style="width: 30%;height: 100px;">
              <p>{{ plane.departureTime }}</p>
              <p>{{ plane.flyAirport }}</p>
            </div>
            <div style="width: 30%;height: 100px;">
              <p>0h55m</p>
              <p>----------------></p>
            </div>
            <div style="width: 30%;height: 100px;">
              <p>{{ plane.arrivalTime }}</p>
              <p>{{ plane.landAirport }}</p>
            </div>
          </div>

          <div style="display: flex;justify-content: space-around;border-top: 1px solid #9ca3b2;margin-top: 60px;padding-top: 20px">
            <span>退改签规则</span>
            <span>行李说明</span>
            <span>购票说明</span>
          </div>

        </div>
        <!--          票价-->
        <div style="display: inline-block;width: 50%;height: 400px;float: right">
          <h1 style="margin-top: 40px">飞机票价</h1>
          <div style="width: 80%;height:350px;margin: 0 auto;margin-top: 50px">
            <p style="margin-top: 20px">成人票
              <span>-----------------------------------------------</span>
              <span style="float:right;margin-left: 20px">x1人</span>
              <span style="float:right;">￥{{plane.price+50+50}}</span>
            </p>
            <p style="margin-top: 32px">票价：
              <span class="ren" style="font-size: 13px;float:right;margin-left: 20px">x1人</span>
              <span style="font-size: 13px;float:right">￥{{ plane.price }}</span>

            </p>
            <p style="margin-top: 20px">
              燃油费:
              <span class="ren"style="font-size: 13px;float:right;margin-left: 20px">x1人</span>
              <span style="font-size: 13px;float:right">￥50</span>
            </p>
            <p style="margin-top: 20px">
              机建费:
              <span class="ren"style="font-size: 13px;float:right;margin-left: 20px">x1人</span>
              <span style="font-size: 13px;float:right">￥50</span>
            </p>
            <div>
              <p style="margin-top: 20px;border-top: 1px solid #9ca3b2;padding-top: 20px">
                <span>订单金额</span>
                <span style="font-size: 13px;color:red;font-weight:800;float: right">￥ <span style="font-size: 25px">{{ plane.price+50+50 }}</span></span>
              </p>
            </div>

          </div>
        </div>
      </div>
      <div>
        <!--        我已阅读。。。-->
        <div style="width: 1200px;margin: 0 auto;background-color: white;margin-top: 20px">
          <div style="display: flex;justify-content: space-around">
            <span style="line-height: 50px">《携程旅游用户服务协议》</span>
            <span style="line-height: 50px">《携程旅游特殊产品退改签规则》</span>
          </div>
        </div>
      </div>
      <div>
        <el-button type="primary" style="width: 200px;height: 50px;margin-left: 836px;margin-top: 50px;background-color:#FF5346" @click="addOrder">提交订单</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import { useRoute } from 'vue-router';
import {getPlaneById,insertOrder} from "@/api/plane.js";

const plane=ref({})
const route=useRoute()
const id=ref(route.query.id)
const orderInfo=ref({})
const getPlane= async ()=>{
  const res= await getPlaneById(id.value)
  plane.value=res.data.data
  orderInfo.value={
    orderName:res.data.data.name+res.data.data.flight,
    classification:1,
    startTime:res.data.data.date,
    endTime:res.data.data.date,
    price:res.data.data.price+100,
    good:id
  }
}

getPlane()
const addOrder= async ()=>{
  const res=await insertOrder(orderInfo.value)
  console.log(res)
  if (res.data.code==200){
    ElMessage.success("提交成功")
  }
}
</script>

<style scoped>
.flytime div{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>